import React from 'react';
import './index.less'
import { Avatar, Card } from 'antd';
import AvatarImg from '@/assets/image/avatar.png'
import Eencypt from '@/utils/encrypt'

export default function Dashboard () {
  const username = new Eencypt().getItem('username')
  return (
    <div className='dashboard-layout'>
      <header>控制台</header>
      <nav>
        {/*左侧内容*/}
        <article>
          <Avatar size={64}  src={AvatarImg}/>
          <div>
            <p>早安 , {username} , 祝你快乐一整天!</p>
            <span>
              新建用户默认角色为admin,您当前的角色为admin,测试数据需要自行添加
              <br/>
              欢迎来到九龄的世界~~~ , 您可以任意进行操作
              <br/>
              默认用户 12345 密码 12345
            </span>
          </div>
        </article>
        {/*右侧内容*/}
        <aside>
          <span>
            接触前端
            <p>1</p>
          </span>
          <span>
            项目数
            <p>2</p>
          </span>
          <span>
            项目访问
            <p>2222</p>
          </span>
        </aside>
      </nav>
      <div className="site-card-border-less-wrapper">
        <Card title="部门人数" bordered={false} style={{ width: 280 }}>
          <p>总人数</p>
          <p>3</p>
        </Card>
        <Card title="用户统计" bordered={false} style={{ width: 280 }}>
          <p>总人数</p>
          <p>3</p>
        </Card>
        <Card title="职位统计" bordered={false} style={{ width: 280 }}>
          <p>总人数</p>
          <p>3</p>
        </Card>
        <Card title="总人数" bordered={false} style={{ width: 280 }}>
          <p>3</p>
        </Card>
      </div>
    </div>
  )
}
